.input-number {
    display: inline-block;

    // Should not exceed its parent's height.
    max-height: 100%;
    height: 34px;
    margin: 0;
    padding: 0;

    font-size: 12px;
    vertical-align: middle;

    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);

    transition: all 0.3s;

    &-focused,
    &:hover {
        border-color: rgb(var(--primary-color));

        .input-number-handler-up,
        .input-number-handler-wrap {
            border-color: rgb(var(--primary-color));
        }
    }

    // &-out-of-range {
    //     .input-number-input {
    //         color: rgb(var(--error-color));
    //     }
    // }

    &-handler {
        touch-action: none;
        cursor: pointer;

        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-align: center;
    }

    &-handler-up-inner,
    &-handler-down-inner {
        user-select: none;
        color: rgb(var(--text-color));
    }

    &-disabled:hover {
        cursor: not-allowed;
        border-color: rgb(var(--border-color));

        .input-number-handler-up,
        .input-number-handler-wrap {
            border-color: rgb(var(--border-color));
        }
    }

    &-input-wrap {
        overflow: hidden;
        height: 100%;
    }

    &-input {
        width: 100%;
        height: 100%;
        padding: 0;

        line-height: 34px;
        color: rgb(var(--text-color));
        text-align: center;

        border: 0;
        border-radius: var(--border-radius-base);
        outline: 0;

        transition: all 0.15s;
    }

    &-handler-wrap {
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;

        width: 20px;
        height: 100%;

        border-left: 1px solid rgb(var(--border-color));

        transition: all 0.3s;
    }

    &-handler-up {
        border-bottom: 1px solid rgb(var(--border-color));
        transition: all 0.15s;

        &-inner {
            &::after {
                content: '+';
            }
        }
    }

    &-handler-down {
        transition: all 0.15s;

        &-inner {
            &::after {
                content: '-';
            }
        }
    }

    .handler-disabled() {
        opacity: 0.3;

        &:hover {
            color: #999;
            border-color: rgb(var(--grey-200));
        }
    }

    &-handler-down-disabled,
    &-handler-up-disabled {
        .handler-disabled();
    }

    &-disabled {
        .input-number-input {
            cursor: not-allowed;
        }

        .input-number-handler {
            .handler-disabled();
        }
    }
}
